<template>
  <div class="box">
    <!-- 头部区域 -->
    <div class="boxtop">
      <van-nav-bar title="车辆检测">
        <template #left>
          <van-icon
            name="arrow-left"
            color="#fff"
            size="18"
            @click="clickLeft"
          ></van-icon>
        </template>
      </van-nav-bar>
    </div>
    <!-- tab栏 -->
    <van-tabs v-model="activeName" color="#000000">
      <van-tab title="安全部件" name="a">
        <div class="saftTool" v-show="ControlShowleft">
          <!-- 损伤记录 -->
          <div class="bbbbb"></div>
          <van-row>
            <van-col :span="16">
              <div class="Damagerecord">损伤记录</div></van-col
            >
            <van-col :span="3">
              <div class="buttonLeft" @click="AllCheack">全选</div>
            </van-col>
            <van-col :span="3">
              <div class="buttonLeft" @click="deleteSelect">清除</div>
            </van-col>
          </van-row>
          <van-divider />
          <div>
            <!-- <van-checkbox-group> -->
            <van-row class="numberStyle">
              <van-col :span="6">
                <!-- <van-checkbox name="a" icon-size="18px"> -->
                <span class="number">序号</span>
              </van-col>
              <van-col :span="10">
                <span>部位</span>
              </van-col>
              <van-col :span="6">操作</van-col>
            </van-row>
          </div>
          <!-- 单选框 -->
          <van-checkbox-group v-model="result" ref="checkboxGroup">
            <van-divider />
            <!-- 第二行 -->
            <van-row
              class="secondStyle"
              v-for="(item, index) in dataArry"
              :key="index"
              @change="clickchange"
            >
              <van-col :span="6">
                <van-checkbox :name="index" icon-size="18px">
                  <span class="numberTwo">{{ index + 1 }}</span>
                </van-checkbox>
              </van-col>
              <van-col :span="10">
                <div class="partTwo">{{ item.part }}</div>
              </van-col>

              <van-col :span="3">
                <div class="buttonLeft">
                  <span class="buttondelte" @click="delteCheack(index)"
                    >删除</span
                  >
                </div>
              </van-col>
              <van-col :span="3">
                <div class="buttonLeft">
                  <span class="button" @click="pakeUp(item)">{{
                    flagShow ? "详情" : "收起"
                  }}</span>
                </div>
              </van-col>
              <van-col class="injureDescribe"
                ><div v-show="item.showRecordImg">
                  <span>损伤描述:</span
                  ><span class="describedPart">{{ item.described }}</span>
                </div>
                <span></span
              ></van-col>
              <van-col>
                <div class="imgStyle" v-show="item.showRecordImg">
                  <van-image
                    width="100"
                    height="100"
                    v-for="(item, index) in item.children"
                    :key="index"
                    :src="item.content"
                  ></van-image>
                </div>
              </van-col>
            </van-row>
            <van-divider />
            <!-- 隐藏按钮 -->
          </van-checkbox-group>
          <div class="buttonLeftaa" @click="ClickShow">
            <van-icon name="arrow-left" size="20" color="#6b6b6b" />
          </div>
        </div>
        <!-- 页面的分割区域 -->
        <div class="BoxPictrue" v-show="ControlShowright">
          <div class="CarpictrueModel">
            <div class="pictrueaa" :style="safeBackgroundImg">
              <div v-for="(item, index) in safetyDot" :key="index">
                <div
                  class="imitationData"
                  :style="{ top: item.top, left: item.left }"
                  @click="ClickImitationDecorate(index)"
                >
                  {{ index + 1 }}
                </div>
              </div>
              <!-- 按钮 -->
              <div class="buttonBack" @click="ClickShowRight">
                <van-icon name="arrow" size="20" color="#6b6b6b" />
              </div>
            </div>
          </div>
          <!-- 多选框选项 -->
          <div class="BoxCheckMuch">
            <van-row>
              <van-checkbox-group
                v-model="pictrueCheack"
                @change="ChangeErrorCheck"
              >
                <van-col
                  :span="6"
                  v-for="(item, index) in newArrCheckbox"
                  :key="index"
                >
                  <van-checkbox
                    :name="item.partCode"
                    shape="square"
                    icon-size="16"
                    ><span class="CheackText">{{
                      item.partName
                    }}</span></van-checkbox
                  ></van-col
                >
              </van-checkbox-group>
              <!-- 完好的单选框 -->
              <van-checkbox-group
                v-model="AllCheackaaa"
                @change="ChangeTrueCheackaaa"
              >
                <van-col
                  :span="6"
                  v-for="(item, index) in newArrRadio"
                  :key="index"
                >
                  <van-checkbox name="4" @click="cccc" icon-size="16px"
                    ><span class="CheackText">{{
                      item.partName
                    }}</span></van-checkbox
                  >
                </van-col>
              </van-checkbox-group>
            </van-row>
          </div>
          <div class="CarCondition">车况描述</div>
          <!-- 输入框 -->
          <div class="BoxInput">
            <van-field
              v-model="message"
              rows="2"
              autosize
              type="textarea"
              maxlength="200"
              placeholder="请输入车况"
              show-word-limit
            />
          </div>
        </div>
      </van-tab>

      <van-tab title="外观部件" name="b">
        <div class="exteriorTool" v-show="exteriorShow">
          <!-- 损伤记录 -->
          <div class="recordStyle"></div>
          <van-row>
            <van-col :span="16">
              <div class="Damagerecord">损伤记录</div>
            </van-col>
            <van-col :span="3">
              <div class="allSelected" @click="selectEvent">全选</div>
            </van-col>
            <van-col>
              <div class="deleteButton" @click="deleteEvent">删除</div>
            </van-col>
          </van-row>
          <van-divider />

          <van-checkbox-group>
            <van-row class="numberStyle">
              <van-col :span="6">
                <van-checkbox name="a" icon-size="18px">
                  <span class="number">序号</span>
                </van-checkbox>
              </van-col>
              <van-col :span="10">
                <span>部位</span>
              </van-col>
              <van-col :span="6">操作</van-col></van-row
            >
          </van-checkbox-group>
          <!-- 单选框 -->
          <van-checkbox-group
            v-for="(item, index) in dataArry"
            :key="index"
            @change="clickchange"
            v-model="result"
            ref="checkboxGroup"
          >
            <van-divider />
            <!-- 第二行 -->
            <van-row class="secondStyle">
              <van-col :span="6">
                <van-checkbox :name="index" icon-size="18px">
                  <span class="numberTwo">{{ index + 1 }}</span>
                </van-checkbox>
              </van-col>
              <van-col :span="10">
                <div class="partTwo">{{ item.part }}</div>
              </van-col>

              <van-col :span="3">
                <div class="buttonLeft">
                  <span class="buttondelte" @click="delteCheack(index)"
                    >删除</span
                  >
                </div>
              </van-col>
              <van-col :span="3">
                <div class="buttonLeft">
                  <span class="button" @click="pakeUp(item)">{{
                    flagShow ? "详情" : "收起"
                  }}</span>
                </div>
              </van-col>
              <van-col class="injureDescribe"
                ><div v-show="item.showRecordImg"><span>损伤描述:</span></div>
              </van-col>
              <van-col>
                <div class="imgStyle" v-show="item.showRecordImg">
                  <van-image
                    width="100"
                    height="100"
                    v-for="(item, index) in item.children"
                    :key="index"
                    :src="item.content"
                  ></van-image>
                </div>
              </van-col>
            </van-row>
            <van-divider />
            <!-- 隐藏按钮 -->
          </van-checkbox-group>
        </div>

        <div class="buttonLeftaa" @click="ClickShow">
          <van-icon name="arrow-left" size="20" color="#6b6b6b" />
        </div>
        <div class="BoxPictrue" v-show="ControlShowright">
          <div class="CarpictrueModel">
            <div class="pictrueStyle" :style="styleBackgroundImg">
              <div v-for="(item, index) in facadeDot" :key="index">
                <div
                  class="imitationData"
                  :style="{ top: item.top, left: item.left }"
                  @click="ClickImitationFacade(index)"
                >
                  {{ index + 1 }}
                </div>
              </div>
              <!-- 按钮 -->
              <div class="buttonBack" @click="ClickShowRight">
                <van-icon name="arrow" size="20" color="#6b6b6b" />
                <!-- 按钮 -->
              </div>
            </div>
          </div>
          <!-- 多选框选项 -->
          <div class="BoxCheckMuch">
            <van-checkbox-group
              v-model="pictrueCheackOne"
              @change="ChangeErrorCheck"
            >
              <van-row>
                <van-col
                  :span="8"
                  v-for="(item, index) in facadeDescribed"
                  :key="index"
                  ><van-checkbox
                    :name="item.partCode"
                    @click="dddd"
                    icon-size="16px"
                    ><span class="CheackText">{{
                      item.partName
                    }}</span></van-checkbox
                  ></van-col
                >
              </van-row>
            </van-checkbox-group>
          </div>
          <div class="CarCondition">车况描述</div>
          <!-- 输入框 -->
          <div class="BoxInput">
            <van-field
              v-model="messageTwo"
              rows="2"
              autosize
              type="textarea"
              maxlength="200"
              placeholder="请输入"
              show-word-limit
            />
          </div>
        </div>
      </van-tab>

      <van-tab title="内饰部件" name="c">
        <div class="exteriorTool" v-show="exteriorShow">
          <!-- 损伤记录 -->
          <div class="recordStyle"></div>
          <van-row>
            <van-col :span="16">
              <div class="Damagerecord">损伤记录</div>
            </van-col>
            <van-col :span="3">
              <div class="allSelected" @click="selectEvent">全选</div>
            </van-col>
            <van-col>
              <div class="deleteButton" @click="deleteEvent">删除</div>
            </van-col>
          </van-row>
          <van-divider />

          <van-checkbox-group>
            <van-row class="numberStyle">
              <van-col :span="6">
                <van-checkbox name="a" icon-size="18px">
                  <span class="number">序号</span>
                </van-checkbox>
              </van-col>
              <van-col :span="10">
                <span>部位</span>
              </van-col>
              <van-col :span="6">操作</van-col></van-row
            >
          </van-checkbox-group>
          <!-- 单选框 -->
          <van-checkbox-group
            v-for="(item, index) in dataArry"
            :key="index"
            @change="clickchange"
            v-model="result"
            ref="checkboxGroup"
          >
            <van-divider />
            <!-- 第二行 -->
            <van-row class="secondStyle">
              <van-col :span="6">
                <van-checkbox :name="index" icon-size="18px">
                  <span class="numberTwo">{{ index + 1 }}</span>
                </van-checkbox>
              </van-col>
              <van-col :span="10">
                <div class="partTwo">{{ item.part }}</div>
              </van-col>

              <van-col :span="3">
                <div class="buttonLeft">
                  <span class="buttondelte" @click="delteCheack(index)"
                    >删除</span
                  >
                </div>
              </van-col>
              <van-col :span="3">
                <div class="buttonLeft">
                  <span class="button" @click="pakeUp(item)">{{
                    flagShow ? "详情" : "收起"
                  }}</span>
                </div>
              </van-col>
              <van-col class="injureDescribe"
                ><div v-show="item.showRecordImg">损伤描述:</div>
                <span></span
              ></van-col>
              <van-col>
                <div class="imgStyle" v-show="item.showRecordImg">
                  <van-image
                    width="100"
                    height="100"
                    v-for="(item, index) in item.children"
                    :key="index"
                    :src="item.content"
                  ></van-image>
                </div>
              </van-col>
            </van-row>
            <van-divider />
            <!-- 隐藏按钮 -->
          </van-checkbox-group>
        </div>

        <div class="buttonLeftaa" @click="ClickShow">
          <van-icon name="arrow-left" size="20" color="#6b6b6b" />
        </div>
        <div class="BoxPictrue" v-show="ControlShowright">
          <div class="CarpictrueModel">
            <div class="pictrueStyle interiorPicture" :style="upholsteryImg">
              <div v-for="(item, index) in locationData" :key="index">
                <div
                  class="imitationData"
                  :style="{
                    top: item.top,
                    left: item.left,
                    backgroundColor: item.ismeaasge ? item.color : '#4397d4',
                  }"
                  @click="ClickImitation3(index)"
                >
                  {{ index + 1 }}
                </div>
              </div>
              <!-- 按钮 -->
              <div class="buttonBack" @click="ClickShowRight">
                <van-icon name="arrow" size="20" color="#6b6b6b" />
              </div>
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
    <!-- to="/accesspart" -->
    <van-button class="nextButton" @click="linkAccess">下一步</van-button>
  </div>
</template>
<script>
import { QueryAccessPart, QuerySavePart } from '@/api/user'
export default {
  data() {
    return {
      flagShow: true,
      activeName: 'a',
      safety: '9010',
      facade: '9020',
      safetyType: '10',
      facadeType: '20',
      decorateType: '30',
      // 损伤描述数据
      safetyDescribed: [],
      facadeDescribed: [],
      // 安全部件数据
      safetyData: [],
      // 外观部件数据
      facadeData: [],
      // 内饰部件数据
      decorateData: [],
      // 单选框
      result: [],
      safeBackgroundImg: {
        backgroundImage: 'url(' + require('@/assets/安全部件.png') + ')',
        backgroundRepeat: 'no-repeat',
        backgroundSize: '100% 100%'
      },
      // 外观部件
      styleBackgroundImg: {
        backgroundImage: 'url(' + require('@/assets/外观部件.jpeg') + ')',
        backgroundRepeat: 'no-repeat',
        backgroundSize: '100% 100%'
      },
      // 内饰部件
      upholsteryImg: {
        backgroundImage: 'url(' + require('@/assets/内饰部件.png') + ')',
        backgroundRepeat: 'no-reoeat',
        backgroundSize: '100% 100%'
      },
      // 复选框值
      newArrCheckbox: [],
      // 单选框值
      newArrRadio: [],
      // 单选框选中的值
      AllDataCheack: [],
      // 是否全选
      checkAllFlag: false,
      // 控制显示的隐藏
      ControlShowright: true,
      ControlShowleft: false,
      // 控制外观部件显示
      exteriorShow: false,
      // 有问题的单选框
      pictrueCheack: [],
      pictrueCheackOne: [],
      // 完好的单选框
      AllCheackaaa: [],
      // 输入框
      message: '',
      messageTwo: '',
      // 自定义一个数组用来接收返回的数据
      dataArry: [],
      // 安全部件点位
      safetyDot: [
        { top: '60%', left: '30%' },
        { top: '68%', left: '42%' },
        { top: '49%', left: '35%' },
        { top: '52%', left: '43%' },
        { top: '54%', left: '51%' },
        { top: '25%', left: '42%' },
        { top: '35%', left: '62%' },
        { top: '30%', left: '75%' },
        { top: '18%', left: '58%' },
        { top: '10%', left: '52%' },
        { top: '10%', left: '68%' },
        { top: '5%', left: '81%' },
        { top: '12%', left: '92%' }
      ],
      // 外观部件点位
      facadeDot: [
        { top: '1%', left: '46%' },
        { top: '7%', left: '28%' },
        { top: '7%', left: '46%' },
        { top: '4%', left: '83%' },
        { top: '7%', left: '66%' },
        { top: '11%', left: '34%' },
        { top: '11%', left: '61%' },
        { top: '12%', left: '46%' },
        { top: '19%', left: '19%' },
        { top: '19%', left: '46%' },
        { top: '19%', left: '77%' },
        { top: '24%', left: '9%' },
        { top: '24%', left: '86%' },
        { top: '33%', left: '27%' },
        { top: '33%', left: '73%' },
        { top: '33%', left: '46%' },
        { top: '40%', left: '27%' },
        { top: '40%', left: '73%' },
        { top: '44%', left: '34%' },
        { top: '44%', left: '65%' },
        { top: '50%', left: '46%' },
        { top: '54%', left: '27%' },
        { top: '57%', left: '34%' },
        { top: '54%', left: '73%' },
        { top: '57%', left: '65%' },
        { top: '64%', left: '46%' },
        { top: '68%', left: '25%' },
        { top: '68%', left: '73%' },
        { top: '76%', left: '46%' },
        { top: '70%', left: '9%' },
        { top: '70%', left: '86%' },
        { top: '82%', left: '31%' },
        { top: '82%', left: '64%' },
        { top: '92%', left: '9%' },
        { top: '92%', left: '83%' },
        { top: '92%', left: '46%' }
      ],
      // 内饰部件点位
      locationData: [
        { top: '6%', left: '16%', color: 'red', ismeaasge: false },
        { top: '12%', left: '16%', color: 'red', ismeaasge: false },
        { top: '6%', left: '78%', color: 'red', ismeaasge: false },
        { top: '12%', left: '78%', color: 'red', ismeaasge: false },
        { top: '14%', left: '37%', color: 'red', ismeaasge: false },
        { top: '14%', left: '48%', color: 'red', ismeaasge: false },
        { top: '14%', left: '60%', color: 'red', ismeaasge: false },
        { top: '22%', left: '10%', color: 'red', ismeaasge: false },
        { top: '20%', left: '36%', color: 'red', ismeaasge: false },
        { top: '22%', left: '48%', color: 'red', ismeaasge: false },
        { top: '22%', left: '86%', color: 'red', ismeaasge: false },
        // { top: "28%", left: "15%", color: "red", ismeaasge: false },
        { top: '28%', left: '36%', color: 'red', ismeaasge: false },
        { top: '28%', left: '58%', color: 'red', ismeaasge: false },
        // { top: "28%", left: "80%", color: "red", ismeaasge: false },
        { top: '34%', left: '34%', color: 'red', ismeaasge: false },
        { top: '34%', left: '56%', color: 'red', ismeaasge: false },
        { top: '40%', left: '48%', color: 'red', ismeaasge: false },
        { top: '48%', left: '18%', color: 'red', ismeaasge: false },
        // { top: "42%", left: "38%", color: "red", ismeaasge: false },
        // { top: "42%", left: "59%", color: "red", ismeaasge: false },
        { top: '48%', left: '80%', color: 'red', ismeaasge: false },
        { top: '53%', left: '33%', color: 'red', ismeaasge: false },
        { top: '53%', left: '56%', color: 'red', ismeaasge: false },
        { top: '58%', left: '33%', color: 'red', ismeaasge: false },
        { top: '58%', left: '53%', color: 'red', ismeaasge: false },
        { top: '69%', left: '18%', color: 'red', ismeaasge: false },
        { top: '74%', left: '18%', color: 'red', ismeaasge: false },
        { top: '67%', left: '36%', color: 'red', ismeaasge: false },
        { top: '67%', left: '59%', color: 'red', ismeaasge: false },
        { top: '76%', left: '47.5%', color: 'red', ismeaasge: false },
        { top: '69%', left: '78%', color: 'red', ismeaasge: false },
        { top: '74%', left: '78%', color: 'red', ismeaasge: false },
        { top: '85%', left: '47.5%', color: 'red', ismeaasge: false }
      ],
      displacement: {
        scale: 1
      }
    }
  },
  created() {
    this.getAllInfo()
  },
  mounted() {
    // 尝试图片缩放
    // this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行
    const that = this
    this.$nextTick(() => {
      // 获取放大或缩小的区域DOM
      const matrix_box = document.querySelector('.interiorPicture')
      // matrix_box.addEventListener("touchstart", function (event) {
      //   var touches = event.touches;
      //   var events = touches[0];
      //   var events2 = touches[1];

      //   // event.preventDefault();

      //   // 第一个触摸点的坐标
      //   that.displacement.pageX = events.pageX;
      //   that.displacement.pageY = events.pageY;

      //   that.displacement.moveable = true;

      //   if (events2) {
      //     that.displacement.pageX2 = events2.pageX;
      //     that.displacement.pageY2 = events2.pageY;
      //   }

      //   that.displacement.originScale = that.displacement.scale || 1;
      //   // console.log(that.displacement);
      // });
      document.addEventListener('touchmove', function (event) {
        if (!that.displacement.moveable) {
          return
        }

        event.preventDefault()

        var touches = event.touches
        var events = touches[0]
        var events2 = touches[1]
        // 双指移动
        if (events2) {
          // 第2个指头坐标在touchmove时候获取
          if (!that.displacement.pageX2) {
            that.displacement.pageX2 = events2.pageX
          }
          if (!that.displacement.pageY2) {
            that.displacement.pageY2 = events2.pageY
          }
          // 双指缩放比例计算
          var zoom =
            that.getDistance(
              {
                x: events.pageX,
                y: events.pageY
              },
              {
                x: events2.pageX,
                y: events2.pageY
              }
            ) /
            that.getDistance(
              {
                x: that.displacement.pageX,
                y: that.displacement.pageY
              },
              {
                x: that.displacement.pageX2,
                y: that.displacement.pageY2
              }
            )
          // 应用在元素上的缩放比例
          var newScale = that.displacement.originScale * zoom
          // 最大缩放比例限制
          if (newScale > 1) {
            newScale = 1
          }
          // 记住使用的缩放值
          that.displacement.scale = newScale
          // 图像应用缩放效果
          // console.log(newScale);
          matrix_box.style.transform = 'scale(' + newScale + ')'
          // 设置旋转元素的基点位置
          matrix_box.style.transformOrigin = '0px 0px 0px'
        }
      })
    })
  },

  methods: {
    getDistance(start, stop) {
      // Math.hypot()计算参数的平方根
      return Math.hypot(stop.x - start.x, stop.y - start.y)
    },
    // 页面初始化时执行
    async getAllInfo() {
      this.custIntentId = this.$route.query.custIntentId
      this.dataArry = this.$store.state.arrData
      // 请求已保存数据的调用
      if (this.$route.query) {
        console.log(this.$route.query, 'this.$route.query')
        this.activeName = this.$route.query.activeName
        const params = { custIntentId: this.custIntentId, partType: '30' }
        console.log(params, 'params')
        const { data } = await QuerySavePart(params)
        // 请求到数据后的逻辑
      }
      // 安全部件tab初始损伤
      try {
        const { data } = await QueryAccessPart(this.safety)
        this.safetyDescribed = data
        this.newArrCheckbox = this.safetyDescribed.slice(0, 3)
        this.newArrRadio = this.safetyDescribed.slice(3, 4)
      } catch (err) {
        console.log(err)
      }
      // 外观部件tab初始损伤
      try {
        const { data: data1 } = await QueryAccessPart(this.facade)
        this.facadeDescribed = data1
      } catch (err) {
        console.log(err)
      }

      // 获取安全部件
      try {
        const { data: data2 } = await QueryAccessPart(this.safetyType)
        this.safetyData = data2
        // console.log(this.safetyData);
      } catch (err) {
        console.log('获取性能部件失败,请稍后重试')
      }
      // 获取外观部件
      try {
        const { data: data3 } = await QueryAccessPart(this.facadeType)
        this.facadeData = data3
      } catch (err) {
        console.log('获取动态部件失败,请稍后重试')
      }
      // 获取内饰部件
      try {
        const { data: data4 } = await QueryAccessPart(this.decorateType)
        this.decorateData = data4
      } catch (err) {
        console.log('获取仪器部件失败,请稍后重试')
      }
    },
    clickLeft() {
      this.$router.back()
    },
    selectEvent(event) {
      console.log(event)
    },
    deleteEvent(event) {
      console.log(event)
    },
    // 收起
    pakeUp(item) {
      if (!item.showRecordImg) {
        this.$set(item, 'showRecordImg', false)
        item.showRecordImg = !item.showRecordImg
      } else {
        item.showRecordImg = !item.showRecordImg
      }
    },
    // 下一步
    linkAccess() {
      this.$router.push({
        path: '/accesspart',
        query: { custIntentId: this.custIntentId }
      })
    },
    clickchange(val) {
      this.AllDataCheack = val
      console.log(val)
    },

    ClickShow() {
      this.ControlShowleft = !this.ControlShowleft
      this.ControlShowright = !this.ControlShowright
    },
    ClickShowRight() {
      this.ControlShowleft = !this.ControlShowleft
      this.ControlShowright = !this.ControlShowright
    },
    // 有错误单选择框
    ChangeErrorCheck(val) {
      this.pictrueCheack = val
    },
    dddd() {
      this.AllCheackaaa = []
      console.log(this.pictrueCheack)
    },
    cccc() {
      this.pictrueCheack = []
      console.log(this.AllCheackaaa)
    },
    // 完好的选择框
    ChangeTrueCheackaaa(val) {
      this.AllCheackaaa = val
    },
    ClickImitationDecorate(index) {
      this.$router.push({
        path: '/damage',
        query: {
          custIntentId: this.custIntentId,
          indexNo: index + 1,
          type: '10',
          activeName: 'a'
        }
      })
    },
    ClickImitationFacade(index) {
      this.$router.push({
        path: '/damage',
        query: {
          custIntentId: this.custIntentId,
          indexNo: index + 1,
          type: '20',
          activeName: 'b'
        }
      })
    },

    ClickImitation3(index) {
      this.$router.push({
        path: '/damage',
        query: {
          indexNo: index + 1 + '',
          type: '30',
          custIntentId: this.$route.query.custIntentId,
          activeName: 'c'
        }
      })
    },

    // 全选按钮
    AllCheack() {
      // this.dataArry.forEach((item, index) => {
      //   this.result[index] = index;
      // });
      this.$refs.checkboxGroup.toggleAll(true)
    },

    // 清除按钮
    deleteSelect(index) {
      console.log(this.result, 'tt')
      this.$store.commit('deleteAll', this.result)
    },
    // 删除按钮
    delteCheack(key) {
      this.$dialog
        .confirm({
          message: '确认删除?'
        })
        .then(() => {
          this.$store.commit('delete', key)
          this.result = []
        })
        .catch(() => {
          // on cancel
        })
    }
  }
}
</script>
<style lang="less" scoped>
.buttonLeftaa {
  position: fixed;
  left: 0;
  top: 50%;
  width: 20px;
  height: 44px;
  border-radius: 0px 20px 20px 0px;
  background-color: #e5e5e5;
  line-height: 44px;
}

.nextButton {
  margin: 0 auto;
  margin-top: 30px;
  margin-bottom: 0.933333rem;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 343px;
  height: 38px;
  background-color: #4397d4;
  border-radius: 20px;
  color: #fff;
}
.secondStyle {
  .van-col {
    padding-top: 8px;
  }
}
.box {
  background-color: #f6f6f9;
  .BoxPictrue {
    background-color: #fff;
    width: 355px;
    margin: 0 auto;
    margin-top: 10px;
    .CarpictrueModel {
      width: 355px;
      background-color: #fff;
      .pictrueaa {
        position: relative;
        width: 100%;
        height: 238px;
        background-color: #ccc;
        .imitationData {
          position: absolute;
          width: 20px;
          height: 20px;
          background-color: #4096d4;
          border-radius: 20px;
          text-align: center;
          line-height: 20px;
          color: #fff;
          font-size: 14px;
        }
        .buttonBack {
          position: absolute;
          bottom: 10px;
          right: 0;
          width: 20px;
          height: 40px;
          border-radius: 20px 0px 0px 20px;
          background-color: #e5e5e5;
          line-height: 40px;
        }
      }
    }
    .pictrueStyle {
      position: relative;
      width: 100%;
      height: 438px;
      background-color: #ccc;
      .imitationData {
        position: absolute;
        width: 20px;
        height: 20px;
        background-color: #4096d4;
        border-radius: 20px;
        text-align: center;
        line-height: 20px;
        color: #fff;
        font-size: 14px;
      }
    }
    .BoxCheckMuch {
      .van-checkbox-group {
        margin-left: 14px;
      }
      margin-top: 0.933333rem;
      .CheackText {
        font-size: 0.373333rem;
      }
    }
    .CarCondition {
      margin-top: 10px;
      font-size: 0.373333rem;
    }
    .BoxInput {
      width: 325px;
      // height: 97px;
      border: 1px solid #e5e5e5;
      margin: 0 auto;
      margin-top: 10px;
    }
  }
  .saftTool {
    margin-left: 16px;
    margin-right: 16px;
    background-color: #fff;
    .bbbbb {
      height: 20px;
      background-color: #f6f6f9;
    }
    .Damagerecord {
      height: 45px;
      line-height: 45px;
      margin-left: 16px;
      // border-bottom: 1px solid #f5f5f5;
      font-size: 16px;
    }
    .buttonLeft {
      height: 45px;
      line-height: 45px;
      text-align: center;
      font-size: 0.373333rem;
      color: #4397d4;
      .button {
        display: inline;
        font-size: 0.373333rem;
      }
      // 删除按钮
      .buttondelte {
        display: inline;
        color: red;
        font-size: 0.373333rem;
      }
    }
    .van-checkbox-group {
      margin-left: 16px;
      margin-top: 16px;
      // 按钮 区域

      .buttonRight {
        width: 40px;
      }
    }
    .injureDescribe {
      width: 98%;
      font-size: 14px;
      color: #333;
      .describedPart {
        display: inline-block;
        padding-left: 20px;
      }
    }
    .imgStyle {
      width: 98%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      .van-image {
        flex: 1;
        width: 33.3%;
        height: 3.2rem;
        margin-right: 0.266667rem;
        margin-top: 10px;
      }
    }
    // 序号
    .numberStyle {
      height: 45px;
      line-height: 45px;
      font-size: 16px;
      text-align: center;
      .number {
        display: inline-block;
        height: 45px;
        line-height: 45px;
      }
    }
    .numberTwo {
      display: inline-block;
      height: 45px;
      line-height: 45px;
      font-size: 15px;
    }
    .partTwo {
      height: 45px;
      line-height: 45px;
      text-align: center;
      font-size: 14px;
      color: #333;
    }
  }
}
</style>
